
<template>
<div >
    <!-- 登录背景 -->
    <div class="background">
      <img :src="imgSrc" width="100%" height="100%" alt="" />
    </div>

    <div style="position:absolute;left:200px;top:230px;width:1500px;">
        <div >
            <h1>欢迎登录问卷风</h1>

        </div>
        <div>
            <el-form ref="form" class="form-input"  > 
                
                <el-form-item >
                    <el-input v-model="account.userName" placeholder="请输入登录帐号" clearable></el-input>
                </el-form-item>    
                <el-form-item>
                    <el-input v-model="account.pwd" placeholder="请输入登录密码" show-password></el-input> 
                </el-form-item> 

            </el-form>
        </div>
        <div >
            <el-button  @click="login()">登录</el-button>
            <el-button  @click="register()">注册</el-button>
        </div>
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {
            imgSrc:require('../.././assets/bga.jpg'),
            account:{  //登录的帐号密码
              userId:'',
              pwd: '',
              userName:'',
              nickName:''
            },
        }
    },
    methods: {
      login(){
          //处理账号密码为空·
          if(this.account.userName==''||this.account.pwd==''){
              //alert("账号密码不能为空")
                this.$alert('账号密码不能为空', '登录失败', {
                confirmButtonText: '知道了，马上去填写',})
          }
          else{
              //账号密码不为空
            this.$axios.post(this.$store.state.url+'/login',this.account)
            .then(res=>{
                console.log(this.account);
                console.log(res.data);
                //登陆成功
                if(res.data.code==20000){
                    console.log(res.data.data.account);
                    this.$store.state.account=res.data.data.account;
                    sessionStorage.setItem("userName",res.data.data.account.userName);
                    sessionStorage.setItem("nickName",res.data.data.account.nickName);
                    this.$router.push('/home');
                }
                else{
                    //处理登陆失败
                   //alert(res.data.message);
                this.$alert(res.data.message, '登录失败', {
                confirmButtonText: '知道了，马上去修改',})                   
                }
            });
          }
        
        },
        //注册
        register(){
            this.$router.push('/register');
        }
    },
    created () {
       
    }

};
    
</script>
<style scoped>
.form-input{
    width: 16%;
    margin: auto;
}
.background{
    width:100%;  
    height:100%;  /**宽高100%是为了图片铺满屏幕 */
    z-index:-1;
    position: absolute;
}
</style>